<template>
  <d2-container>
    <div class="fundsManagement">
      <el-tabs type="border-card" @tab-click="onTabClick">
        <el-tab-pane label="任务扣款">
          <span>日期：</span>
          <el-date-picker size="small" v-model="timearr" type="daterange" align="right" unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                          format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
          <el-button style="margin-left:16px;" size="small" type="primary" icon="el-icon-search" @click="onkkSearch">
            搜索
          </el-button>
          <el-button style="margin-left:16px;" size="small" type="primary" icon="el-icon-search" @click="onkkExcal">
            导出Excal
          </el-button>
          <div class="tablebox">
            <el-table v-loading="kkloading" :data="tableDatakk" border style="width: 100%" :height="tableHeight"
                      header-align="center">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
              <el-table-column prop="id" label="任务ID" width="100" align="center"></el-table-column>
              <el-table-column prop="cooperation_message" label="任务详情" align="center"></el-table-column>
              <el-table-column prop="cooperation_money" label="扣款前余额" width="120" align="center"></el-table-column>
              <el-table-column prop="money" label="扣款金额" width="120" align="center"></el-table-column>
              <el-table-column prop="cooperationlog_time" label="扣款时间" width="200" align="center"></el-table-column>
              <el-table-column prop="cooperation_note" label="操作" width="200" align="center"></el-table-column>
            </el-table>
            <!--            <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page.sync="page"-->
            <!--                           style="text-align:right;margin-top:10px;"-->
            <!--                           :page-size="20" layout="total, prev, pager, next" :total="total">-->
            <!--            </el-pagination>-->
            <el-pagination :page-size="20" background @size-change="handleSizeChange" :current-page="page"
                           layout="total, sizes, prev, pager, next, jumper"
                           style="text-align:right;margin-top:10px;"
                           :page-sizes="[10, 50, 100, 300,500,1000]"
                           :total="total" @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="任务返款">
          <span>日期：</span>
          <el-date-picker size="small" v-model="timelist" type="daterange" align="right" unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
          <span style="margin-left:16px;">支付ID：</span>
          <el-input size="small" v-model="payval" placeholder="请输入支付ID" style="width:200px;"></el-input>
          <el-button style="margin-left:16px;" size="small" type="primary" icon="el-icon-search" @click="onSearch">搜索
          </el-button>
          <div class="tablebox">
            <el-table v-loading="tkloading" :data="tableDatatk" border style="width: 100%" :height="tableHeight"
                      header-align="center">
              <el-table-column type="index" label="序号" width="60" align="left"></el-table-column>
              <el-table-column prop="pay_task_id" label="支付ID" width="70" align="left"></el-table-column>
              <el-table-column prop="shopname" label="店铺名称" width="80" align="left"></el-table-column>
              <el-table-column prop="note" label="返款明细" align="left"></el-table-column>
              <el-table-column prop="account_num" label="返款单数" width="80" align="left"></el-table-column>
              <el-table-column prop="account_money" label="返款金额" width="80" align="left"></el-table-column>
              <el-table-column prop="create_time" label="返款时间" width="200" align="left"></el-table-column>
            </el-table>
            <!--            <el-pagination @current-change="handleCurrentChangeBack" :current-page.sync="page" layout="total, sizes, prev, pager, next, jumper"-->
            <!--                           style="text-align:right;margin-top:10px;"-->
            <!--                           :page-sizes="[10, 50, 100, 300,500,1000]"-->
            <!--                           :page-size="20" :total="total">-->
            <!--            </el-pagination>-->

            <el-pagination :page-size="20" background @size-change="handleSizeChangeBack" :current-page="page"
                           layout="total, sizes, prev, pager, next, jumper"
                           style="text-align:right;margin-top:10px;"
                           :page-sizes="[10, 50, 100, 300,500,1000]"
                           :total="total" @current-change="handleCurrentChangeBack">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="消费明细">
          <span>日期：</span>
          <el-date-picker size="small" v-model="timings" type="daterange" align="right" unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日" value-format="timestamp"></el-date-picker>
          <span style="margin-left:16px;">店铺名称：</span>
          <el-input size="small" v-model="task_name" placeholder="请输入店铺名称" style="width:200px;"></el-input>
          <el-button style="margin-left:16px;" size="small" type="primary" icon="el-icon-search"
                     @click="onSearch_order">搜索
          </el-button>
          <div class="tablebox">
            <el-table v-loading="tkloading" :data="tables" border style="width: 100%" :height="tableHeight"
                      header-align="center">
              <el-table-column type="index" label="序号" width="" align="left"></el-table-column>
              <el-table-column prop="task_order" label="订单号" width="" align="left"></el-table-column>
              <el-table-column prop="shop_name" label="店铺名称" width="" align="left"></el-table-column>
              <el-table-column prop="consumption_principal" label="消费本金" width="" align="left"></el-table-column>
              <el-table-column prop="consumption_money" label="消费佣金" width="" align="left"></el-table-column>
              <el-table-column prop="create_time" label="消费时间" width="200" align="left">
                <template slot-scope="scope">
                  {{ scope.row.create_time * 1000 | moment }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="审核拒绝返款">
          <span>日期：</span>
          <el-date-picker size="small" v-model="timings" type="daterange" align="right" unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日" value-format="timestamp"></el-date-picker>
          <span style="margin-left:16px;">店铺名称：</span>
          <el-input size="small" v-model="task_name" placeholder="请输入店铺名称" style="width:200px;"></el-input>
          <el-button style="margin-left:16px;" size="small" type="primary" icon="el-icon-search"
                     @click="onSearch_order">搜索
          </el-button>
          <div class="tablebox">
            <el-table v-loading="tkloading" :data="BackData" border style="width: 100%"
                      header-align="center">
              <el-table-column type="index" label="序号" width="" align="left"></el-table-column>
              <!--              <el-table-column prop="task_order" label="订单号" width="" align="left"></el-table-column>-->
              <!--              <el-table-column prop="shop_name" label="店铺名称" width="" align="left"></el-table-column>-->
              <el-table-column prop="cooperation_note" label="类型" width="" align="left"></el-table-column>
              <el-table-column prop="cooperation_message" label="备注" width="800" align="left"></el-table-column>
              <el-table-column prop="cooperationlog_time" label="消费时间" width="200" align="left">
                <template slot-scope="scope">
                  {{ scope.row.cooperationlog_time | moment }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="对账报表">
          <div style="display:flex;">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-input type="text" v-model="shopname" style="width:150px;" placeholder="请输入店铺名称"></el-input>
            <el-button style="margin-left:16px;" size="small" type="danger" @click="excel_get_book_orders">
              对账报表
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </d2-container>
</template>

<script>
import {accontlist, paylist, consumption_list, userinfo, excel_get_book_order} from '../../../api/api'
import Vue from "vue";
import moment from "moment";

export default {
  data() {
    return {
      value1: "",
      shopname: "",
      tableHeight: document.body.clientHeight - 280 + 'px',
      timelist: [],
      timearr: [],
      task_name: "",
      tkloading: false,
      tables: [],
      total_back: 0,
      timings: [],
      kkloading: false,
      tableDatatk: [],
      tableDatakk: [],
      page: 1,
      total: 0,
      pageBack: 1,
      BackData: [],
      page_size_back: 20,
      page_sizeBack: 20,
      page_size_getkk: 20,
      page_size: 100,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      payval: ''
    }
  },
  mounted() {
    this.getkklist()
    this.getUser()
    this.consumption_lists()
  },
  methods: {
    excel_get_book_orders() {
      let params = {
        shop_name: this.shopname,
        begin_time: moment(this.value1[0]).format('YYYY-MM-DD HH:mm:ss'),
        end_time: moment(this.value1[1]).format('YYYY-MM-DD HH:mm:ss'),
      }
      excel_get_book_order(params).then((res) => {
        window.open(res.Data);
      })
    },
    onkkExcal() {
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../../../excel/Export2Excel');
        const tHeader = ['任务ID', '任务扣款', '扣款金额', '扣款时间', '操作'];
        const filterVal = ['id', 'cooperation_message', 'money', 'cooperationlog_time', 'cooperation_note'];
        let arring = this.tableDatakk
        const list = arring;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '订单明细excel');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    onSearch_order() {
      this.consumption_lists()
    },
    consumption_lists() {
      let params = {
        page: this.page,
        page_size: this.page_size,
        end_time: this.timings[1] / 1000,
        shop_name: this.task_name,
        begin_time: this.timings[0] / 1000,
      }
      consumption_list(params).then((res) => {
        this.tables = res.Data
      })
    },
    getBacklist() {
      let params = {
        page: this.pageBack,
        page_size: this.page_sizeBack,
        note: "任务审核拒绝返款",
        paramenters: []
      }
      paylist(params).then((res) => {
        this.BackData = res.Data
      })
    },
    //获取用户信息
    getUser() {
      userinfo().then(res => {
        if (res.Status == 200) {
          this.$emit('getMoney', res.Data.money)
        } else {
          this.$message.error(res.Message)
        }
      })
    },
    //获取任务扣款列表
    getkklist() {
      this.kkloading = true
      let params = {
        page: this.page,
        page_size: this.page_size_getkk,
        paramenters: this.timearr,
      }
      paylist(params).then(res => {
        this.kkloading = false
        if (res.Status == 200) {
          this.total = res.Count
          let temp = res.Data
          let ipos
          temp.forEach(ele => {
            ipos = ele.cooperationlog_time.indexOf("+")
            ele.cooperationlog_time = ele.cooperationlog_time.replace(/T/g, " ").substring(0, ipos)
          })
          this.tableDatakk = temp

        } else {
          this.$message.error(res.Message)
        }
      })
    },
    //获取任务返款
    getData() {
      this.tkloading = true
      let params = {
        page: this.page,
        page_size: this.page_size_back,
        paramenters: this.timelist,
        task_id: Number(this.payval) ? Number(this.payval) : 0
      }
      accontlist(params).then(res => {
        this.tkloading = false
        if (res.Status == 200) {
          this.total = res.Count
          let temp = res.Data
          let ipos
          temp.forEach(ele => {
            ipos = ele.create_time.indexOf("+")
            ele.create_time = ele.create_time.replace(/T/g, " ").substring(0, ipos)
          })
          this.tableDatatk = temp

        } else {
          this.$message.error(res.Message)
        }
      })
    },
    //扣款搜索
    onkkSearch() {
      if (this.timearr.length > 0) {
        this.timearr[0] = this.timearr[0] + ' 00:00:00'
        this.timearr[1] = this.timearr[1] + ' 23:59:59'
      }
      this.getkklist()
    },
    //返款搜索
    onSearch() {
      if (this.timelist.length > 0) {
        this.timelist[0] = this.timelist[0] + ' 00:00:00'
        this.timelist[1] = this.timelist[1] + ' 23:59:59'
      }
      this.getData()
    },
    //切换tabs
    onTabClick(val) {
      this.page = 1
      if (val.label == '任务扣款') {
        this.getkklist()
      } else if (val.label == '任务返款') {
        this.getData()
      } else if (val.label == '审核拒绝返款') {
        this.getBacklist()
      }
    },
    //分页
    handleCurrentChangeBack(val) {
      this.page = val
      this.getData()
    },
    //分页
    handleCurrentChange(val) {
      this.page = val
      this.getkklist()
    },
    handleSizeChange(val) {
      console.log(val);
      this.page_size_getkk = val
      this.getkklist()
    },
    handleSizeChangeBack(val) {
      this.page_size_back = val
      this.getData()
    },
  }
};
</script>
<style lang="scss">
.fundsManagement {
  .tablebox {
    margin: 20px 0;
  }
}
</style>
